<template>
  <div class="app-container">
    <!-- 交易所信息 -->
    <div class="cqt-box-item">
        <h3>交易所信息</h3>
           <el-form :model="exchange">
            <el-form-item label="ID" label-width="120px">
                <el-input v-model="exchange.id" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="交易所名称" label-width="120px">
                <el-input v-model="exchange.name" auto-complete="off"  disabled></el-input>
            </el-form-item>
   
            <el-form-item label="交易所别名" label-width="120px">
                <el-input v-model="exchange.alias" auto-complete="off" disabled></el-input>
            </el-form-item>

            <el-form-item label="公钥" label-width="120px">
                <el-input v-model="exchange.publicKey" auto-complete="off" disabled></el-input>
            </el-form-item>

            <el-form-item label="私钥" label-width="120px">
                <el-input v-model="exchange.privateKey" auto-complete="off" disabled></el-input>
            </el-form-item>

            <el-form-item label="交易对" label-width="120px">
                <el-tag size="mini" v-for="item in exchange.coinPairs.split(',')">{{ item }}</el-tag>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="handleEditExchange">编辑</el-button>
            </el-form-item>

            </el-form>
    </div>

<!-- 交易所信息编辑 -->
    <el-dialog title="交易所信息编辑" :visible.sync="dialogExchangeFormVisible">
        <el-form :model="exchangeForm">
            <el-form-item label="ID" label-width="120px">
                <el-input v-model="exchangeForm.id" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="交易所名称" label-width="120px">
                <el-input v-model="exchangeForm.name" auto-complete="off"  ></el-input>
            </el-form-item>
   
            <el-form-item label="交易所别名" label-width="120px">
                <el-input v-model="exchangeForm.alias" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="公钥" label-width="120px">
                <el-input v-model="exchangeForm.publicKey" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="私钥" label-width="120px">
                <el-input v-model="exchangeForm.privateKey" auto-complete="off" disabled></el-input>
            </el-form-item>


            <el-form-item label="交易对" label-width="120px">
            <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>        

            </el-form-item>  

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogExchangeFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateExchange">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>



<script>
import { getExchangeInfo,updateExchangeInfo } from '@/api/exchange'

export default {
  data() {
    return {

        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        //交易所ID
        exchangeId: null,
        
        //交易所信息
        exchange: {
            id: null,
            coinPairs: ''
        },

        currentPage: 1,
        pageSize: 100,
        logTotal: 400,

        //交易所编辑页面是否关闭
        dialogExchangeFormVisible: false,

        //交易所信息编辑页面缓存数据
        exchangeForm:{
        }
    }
  },
  created() {
    this.exchangeId = this.$route.query.id;
    this.init();
  },
  methods: {
     init(){
        // 初始化请求
        this.loadexchangeData();
    },

    //加载该交易所信息
    loadexchangeData() {
         getExchangeInfo(this.exchangeId).then(response => {
            var data = response.data;
            this.exchange=data
            console.debug(this.exchange)
        })
    },

//策略配置信息编辑页面(处理器)
    handleEditExchange(){
        this.exchangeForm=this.exchange
        this.dynamicTags=this.exchange.coinPairs.split(',')
        this.dialogExchangeFormVisible=true;
    },

    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
    
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

    handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

    

//更新交易所信息
    updateExchange(){
        var data=this.exchangeForm
        data.coinPairs=this.dynamicTags.join(',')

        // TODO该方法进行策略配置的更新
        updateExchangeInfo(data).then(response =>{
            this.$message('操作成功')

            this.dialogExchangeFormVisible=false
        }).catch(err =>{
            console.log('更新失败',err)
        })
    }


  }
}
</script>

<style scoped>
    .line{
    text-align: center;
    }
    .cqt-box-item h3>button{margin-left:20px;}
    .el-form-item .el-tag{margin-left:2px;margin-right: 2px;}
    .el-pagination{margin-top:20px;}
    .el-table{margin-bottom:60px;}
    .cqt-caption{font-size:14px;color:#ccc;padding:10px 20px;background-color:#f7f7f7;border-radius:4px;margin:0;}

    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
